<%--
  Created by IntelliJ IDEA.
  User: 劳寄修
  Date: 2021/2/21
  Time: 20:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册用户</title>
    <script type="text/javascript"  charset="utf-8" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <link type="text/css" href="${pageContext.request.contextPath}/static/bootstrap4/css/bootstrap.min.css" rel="stylesheet"/>
    <link type="text/css" href="${pageContext.request.contextPath}/static/css/register.css" rel="stylesheet"/>
    <link type="text/css" href="${pageContext.request.contextPath}/static/css/toastr.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap4/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/toastr.min.js"></script>
    <style>
        body{
            background-size:80px 60px;
        <%--background-image: url("src=${pageContext.request.contextPath}/images/bg/img6.jpg");--%>
            background-repeat: no-repeat;
            background-size: 100%;

        }
    </style>
</head>
<body style=" background-image: url('${pageContext.request.contextPath}/static/images/bg/img6.jpg');">
<div id="register" >
    <div name="title" class="top_titles" >
        <div class="top_title" >
            <h4>注册用户</h4>
        </div>
    </div>
    <div name="context" class="center">
        <div class="center_block">
            <div>
                <span>昵称：</span>
            </div>
            <div>

                <input type="text" id="uName" name="input_text" class="form-control" aria-describedby="helpBlock">
            </div>
        </div>
        <div class="center_block">
            <div>
                <span>账号：</span>
            </div>
            <div>
                <input type="text" id="admin" name="input_text" class="form-control" aria-describedby="helpBlock">
            </div>
        </div>
        <div class="center_block">
            <div>
                <span>密码：</span>
            </div>
            <div>
                <input type="password" id="pwd"  name="input_text" class="form-control" aria-describedby="helpBlock">
            </div>
        </div>
        <div class="center_block">
            <div>
                <span>确定密码：</span>
            </div>
            <div>
                <input type="password" id="confirmPwd"  name="input_text" class="form-control" aria-describedby="helpBlock">
            </div>
        </div>
        <div class="center_block">
            <div>
                <span>邮箱：</span>
            </div>
            <div>

                <input type="text" id="email" name="input_text" class="form-control" aria-describedby="helpBlock">
            </div>
        </div>
        <div class="center_block">
            <div>
                <span>手机号：</span>
            </div>
            <div>
                <input type="text" id="phone" name="input_text"  class="form-control" aria-describedby="helpBlock">
            </div>
        </div>

    </div>
    <div class="bottom" style="height: 100px;">
        <div class="btn_sub">
            <button type="button" id="subData" class="btn btn-primary">
                <span>立即注册</span>
            </button>
            <div style="width: 150px;float: right;margin: 3px;">
                <label>已拥有账号？<a href="${pageContext.request.contextPath}/index.jsp">立即登录</a></label>
            </div>
        </div>

    </div>
</div>
</body>


<script type="text/javascript">



    $(function(){
        verification();
    })

    var flag=true;
    function verification(){
        //获取文本框
        var admin="";
        var pwd="";
        var confirmPwd="";
        var email="";
        var phone="";
        var uName="";
        //验证账号
        $("#admin").on("blur",function(){
            admin=$("#admin").val();
            if(admin.trim()==""){
                $(this).parent().addClass("form-group has-error has-feedback");
                toastr.info("不可为空");
                return;
            }

            var vfAdmin=/^[1-9a-zA-Z]\w{5,9}$/;

            if(!vfAdmin.test(admin)){
                $(this).parent().addClass("form-group has-error has-feedback");
                toastr.warning("账号不合法","提示");
                return;
            }else{

                //请求后台数据检查该账号是否已存在
                var msg={"admin":admin};
               $.ajax({
                   async:false,//开启同步
                   type:"post",
                   dataType:"json",
                   contentType:"application/json;charset=utf-8",
                   url:"${pageContext.request.contextPath}/admin/vfAd",
                   data:JSON.stringify(msg),
                   success:function (data) {
                        if (!data.state){
                            flag=true;
                            $("#admin").parent().removeClass("form-group has-error has-feedback");
                            $("#admin").parent().addClass("form-group has-success has-feedback");
                        }else {
                            flag=false;
                            $("#admin").parent().addClass("form-group has-error has-feedback");
                            toastr.info("该用户已注册");
                        }
                   },
                   error:function (e) {
                        console.log(e);
                        toastr.error("服务器异常");
                   }
               });

                $(this).parent().removeClass("form-group has-error has-feedback");
                $(this).parent().addClass("form-group has-success has-feedback");
            }




        });


        //密码非空验证
        $("#pwd").on("blur",function(){

            pwd=$("#pwd").val();
            console.log(pwd);
            if(pwd.trim()==""){
                toastr.info("请输入密码","提示！");
                $(this).parent().addClass("form-group has-error has-feedback");
                return;
            }
            //6-16位字母和数字组合
            var passRegex = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$";

            if(!pwd.match(passRegex)){
                toastr.info("6-16位字母和数字组合");
                $(this).parent().addClass("form-group has-error has-feedback");
                return;
            }else{
                $(this).parent().removeClass("form-group has-error has-feedback");
                $(this).parent().addClass("form-group has-success has-feedback");
            }
        });


        $("#confirmPwd").on("blur",function(){
            if(pwd.trim()=="") return;
            confirmPwd=$("#confirmPwd").val();
            //匹配两个密码
            console.log(confirmPwd+"===="+pwd)
            if(confirmPwd!=pwd){
                $("#confirmPwd").parent().addClass("form-group has-error has-feedback");
                toastr.error("密码不一致");
                return;
            }else{
                $("#confirmPwd").parent().removeClass("form-group has-error has-feedback");
                $(this).parent().addClass("form-group has-success has-feedback");
            }
        });


        //邮箱验证
        $("#email").on("blur",function(){

            var vfEmail=new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$");
            email=$("#email").val();
            if(!email.match(vfEmail)){
                /* 只允许英文字母、数字、英文句号、以及中划线组成:×××@域名*/
                $(this).parent().addClass("form-group has-error has-feedback");
                toastr.error("只允许英文字母、数字、英文句号、以及中划线组成:×××@域名");
                return;
            }else{
                console.log("ok")
                $("#email").parent().removeClass("form-group has-error has-feedback");
                $("#email").parent().addClass("form-group has-success has-feedback");
            }

        });


        //验证手机号
        $("#phone").on("blur",function(){

            phone=$("#phone").val();
            var vfPhone=new RegExp("^[1-9][0-9]{10}$");
            if(!phone.match(vfPhone)){
                $(this).parent().addClass("form-group has-error has-feedback");
                toastr.info("手机号不合法");
                return;
            }else{
                $(this).parent().removeClass("form-group has-error has-feedback");
                $(this).parent().addClass("form-group has-success has-feedback");
            }

        });

        //姓名验证
        $("#uName").on("blur",function(){



            uName=$("#uName").val();
            if(uName.trim()==""){
                $(this).parent().addClass("form-group has-error has-feedback");
                toastr.error("请输入昵称");
            }else{
                $(this).parent().removeClass("form-group has-error has-feedback");
                $(this).parent().addClass("form-group has-success has-feedback");
            }
        });


        $("#subData").click(function () {
            //调用
            subData(admin,pwd,confirmPwd,email,phone,uName);
        });

    }



    //提交数据
    function subData(admin,pwd,confirmPwd,email,phone,uName){

        if(!flag||
            admin.trim()==""||pwd.trim()==""||confirmPwd.trim()==""||
            email.trim()==""||phone.trim()==""||uName.trim()==""
        ){
            toastr.info("请填入数据");
            return;
        }else{

                var msg={"id":0,"userName":admin,"userPwd":confirmPwd,"email":email,"phone":phone,"realName":uName};

            	$.ajax({
                    type:"post",
                    contentType: "application/json;charset=utf-8",
                    url:"${pageContext.request.contextPath}/admin/addUser",
                    dataType: "json",
                    data:JSON.stringify(msg) ,
                    success:function (data) {

                        if (data.state){
                                $("#admin").val("");
                                $("#pwd").val("");
                                $("#email").val("");
                                $("#phone").val("");
                                $("#uName").val("");
                                $("#confirmPwd").val("");
                            toastr.success("注册成功，请返回登录页面");
                            window.location.href="${pageContext.request.contextPath}/index.jsp";
                        }else {
                            toastr.error("注册失败,请检查数据");
                        }

                    },
                    error:function (e) {
                        console.log(e);
                        toastr.error("服务器异常");
                    }

                });

        }


    }




    customTips();


    //提示居中
    function customTips() {
        toastr.options = {
            closeButton: false, //是否显示关闭按钮
            debug: false, //是否使用debug模式
            positionClass: "toast-center-center",//弹出窗的位置
            showDuration: 300,//显示的动画时间
            hideDuration: 1000,//消失的动画时间
            timeOut: 1000, //展现时间
            extendedTimeOut: 1000,//加长展示时间
            showEasing: "swing",//显示时的动画缓冲方式
            hideEasing: "linear",//消失时的动画缓冲方式
            showMethod: "fadeIn",//显示时的动画方式
            hideMethod: "fadeOut" //消失时的动画方式
        };
    }





</script>




</html>
